/*
 * @Description: 位置展示列表
 * @Author: buwei.huang
 * @Date: 2019-07-30 10:55:08
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-08-08 18:25:16
 */
<template>
  <scroll
    class="SearchSiteList_wrap"
    :class="!getSearchText ? 'noData_height' : ''"
    ref="scroll"
    :useBody="useBody"
    :getListData="getListDataByScroll"
    :up="up"
  >
    <div v-if="amapList.length > 0">
      <p class="SearchSiteList_label">位置</p>
      <div class="SearchSiteList_list">
        <template v-for="(item,index) in amapList">
          <search-site-item
            v-if="index > 4 ? isSeeMore : true"
            :key="index"
            :item="item"
            :getSearchText="getSearchText"
            :routeType="routeType"
          />
        </template>
        <div
          v-if="!isSeeMore"
          class="isSeeMore"
          @click="onSeeMore"
        >
          查看更多位置
        </div>
      </div>
    </div>
  </scroll>
</template>
<script>
import SearchSiteItem from './SearchSiteItem'
import { getAmapList } from '../api/api.js'
import { XBScroll } from 'vue-xb-ui-depot'
export default {
  components: {
    'search-site-item': SearchSiteItem,
    'scroll': XBScroll
  },
  props: {
    routeType: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      isShow: true,
      amapList: [],
      isSeeMore: false,
      // 是否使用body作为滑动容器
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      }
    }
  },
  computed: {
    getSearchText() {
      return this.$store.getters.searchText
    }
  },
  watch: {
    getSearchText(val) {
      this.resetData()
      this.$refs.scroll.mescroll.resetUpScroll()
    }
  },
  methods: {
    getListDataByScroll(pageIndex, pageSize) {
      let txt = this.getSearchText
      return this.getSearchText ? getAmapList(this.getSearchText, pageIndex, pageSize).then(res => {
        if (this.getSearchText !== txt) return { length: pageSize, count: 0 } // 避免被之前一次请求顶掉
        this.amapList = pageIndex !== 1 ? this.amapList.concat(res.amapList) : res.amapList
        let count = !this.isSeeMore ? 2 : res.amapCount
        // 数量小于等于2时不显示
        if (res.amapCount <= 5) {
          this.isSeeMore = true
        }
        return { length: pageSize, count: count }
      }).catch(err => {
        console.dir(err)
      })
        : new Promise((resolve, reject) => {
          resolve({ length: pageSize, count: 0 })
        })
    },
    onSeeMore() {
      this.isSeeMore = true
      this.$refs.scroll.mescroll.resetUpScroll()
    },
    // 数据重置
    resetData() {
      this.amapList = []
      this.isSeeMore = false
    }
  }
}
</script>
<style>
.SearchSiteList_wrap {
  height: calc(100% - 112px);
}
.SearchSiteList_label {
  height: 64px;
  line-height: 64px;
  padding: 0 32px;
  color: #666666;
  font-size: 14px; /*no*/
}
.SearchSiteList_list {
  background-color: #fff;
}
.isSeeMore {
  height: 112px;
  line-height: 112px;
  text-align: center;
  font-size: 16px; /*no*/
  color: #999999;
}
.noData_height {
  height: 0;
}
</style>
